

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>消息盒子</title>

  <link rel="stylesheet" href="/Static/layui/css/layui.css">
  <style>
    .layim-msgbox{margin: 15px;}
    .layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
    .layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
    .layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
    .layim-msgbox li p span{padding-left: 5px; color: #999;}
    .layim-msgbox li p em{font-style: normal; color: #FF5722;}

    .layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
    .layim-msgbox-user{padding-top: 5px;}
    .layim-msgbox-content{margin-top: 3px;}
    .layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
    .layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
  </style>
</head>
<body>

<ul class="layim-msgbox">
<?php $__currentLoopData = $fri_record; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $val): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
  <?php if($val['type'] ==1): ?>
      <li data-uid="<?php echo e($val['content']['uid']); ?>" data-username="<?php echo e($val['content']['username']); ?>" data-avatar="<?php echo e($val['content']['avatar']); ?>"  data-fromGroup="<?php echo e($val['content']['group']); ?>">
        <a href="/u/<?php echo e($val['content']['uid']); ?>" target="_blank">
          <img src="<?php echo e($val['content']['avatar']); ?>" class="layui-circle layim-msgbox-avatar">
        </a>
        <p class="layim-msgbox-user">
          <a href="/u/<?php echo e($val['content']['uid']); ?>" target="_blank"><?php echo e($val['content']['username']); ?></a>
          <span><?php echo e($date); ?></span>
        </p>
        <p class="layim-msgbox-content">
          请求添加你为好友
          <span>附言: <?php echo e($val['content']['msg']); ?></span>
        </p>
        <p class="layim-msgbox-btn">
          <?php if($val['handle']==0): ?>
            <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
            <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
          <?php elseif($val['handle']==1): ?>
            已同意
          <?php elseif($val['handle']==2): ?>
            已拒绝
          <?php endif; ?>
        </p>
      </li>
  <?php elseif($val['type'] ==3): ?>
      <li class="layim-msgbox-system">
        <p><em>系统：</em><?php echo e($val['content']); ?><span><?php echo e($date); ?></span></p>
      </li>
  <?php endif; ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</ul>

<script src="/Static/layui/layui.js"></script>
<script>
    layui.use(['layim', 'flow'], function(){
        var layim = layui.layim
            ,layer = layui.layer
            ,laytpl = layui.laytpl
            ,$ = layui.jquery
            ,flow = layui.flow;

        var cache = {}; //用于临时记录请求到的数据

        //请求消息
        var renderMsg = function(page, callback){

            //实际部署时，请将下述 getmsg.json 改为你的接口地址

        //     $.post('getmsg.json', {
        //         page: page || 1
        //     }, function(res){
        //         if(res.code != 0){
        //             return layer.msg(res.msg);
        //         }
        //
        //         //记录来源用户信息
        //         layui.each(res.data, function(index, item){
        //             cache[item.from] = item.user;
        //         });
        //
        //         callback && callback(res.data, res.pages);
        //     });
        };

        //消息信息流
        // flow.load({
        //     elem: '#LAY_view' //流加载容器
        //     ,isAuto: false
        //     ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
        //     ,done: function(page, next){ //加载下一页
        //         renderMsg(page, function(data, pages){
        //             var html = laytpl(LAY_tpl.value).render({
        //                 data: data
        //                 ,page: page
        //             });
        //             next(html, page < pages);
        //         });
        //     }
        // });

        //打开页面即把消息标记为已读
        /*
        $.post('/message/read', {
          type: 1
        });
        */

        //操作
        var active = {
            //同意
            agree: function(othis){
                var li = othis.parents('li')
                    ,uid = li.data('uid')
                    ,username = li.data('username')
                    ,avatar = li.data('avatar')

                //选择分组
                parent.layui.layim.setFriendGroup({
                    type: 'friend'
                    ,username: username
                    ,avatar: avatar
                    ,group: parent.layui.layim.cache().friend //获取好友分组数据
                    ,submit: function(group, index){
                        $.ajax({
                            url:"/agree",
                            data:{token:localStorage.getItem('token'),uid:uid,group:group},
                            dataType:"json",
                            type:"post",
                            success:function (res) {
                                layer.msg(res.msg)
                                if(res.code == 1)
                                {
                                    //将好友追加到主面板
                                    parent.layui.layim.addList({
                                        type: 'friend'
                                        ,avatar: res.data.fuidInfo.avatar //好友头像
                                        ,username: res.data.fuidInfo.username //好友昵称
                                        ,groupid: group //所在的分组id
                                        ,id: uid //好友ID
                                        ,sign: res.data.fuidInfo.sign //好友签名
                                    });
                                    othis.parent().html('已同意');
                                    parent.sendMsg({action:'agree',token:localStorage.getItem('token'),fuid:uid,group:group})
                                }
                                parent.layer.close(index);
                            },
                            error:function (err) {
                                console.log("err = ",err)
                            }
                        })



                        //实际部署时，请开启下述注释，并改成你的接口地址
                        /*
                        $.post('/im/agreeFriend', {
                          uid: uid //对方用户ID
                          ,from_group: from_group //对方设定的好友分组
                          ,group: group //我设定的好友分组
                        }, function(res){
                          if(res.code != 0){
                            return layer.msg(res.msg);
                          }

                          //将好友追加到主面板
                          parent.layui.layim.addList({
                            type: 'friend'
                            ,avatar: user.avatar //好友头像
                            ,username: user.username //好友昵称
                            ,groupid: group //所在的分组id
                            ,id: uid //好友ID
                            ,sign: user.sign //好友签名
                          });
                          parent.layer.close(index);
                          othis.parent().html('已同意');
                        });
                        */

                    }
                });
            }

            //拒绝
            ,refuse: function(othis){
                var li = othis.parents('li')
                    ,uid = li.data('uid');

                layer.confirm('确定拒绝吗？', function(index){
                    $.post('/im/refuseFriend', {
                        uid: uid //对方用户ID
                    }, function(res){
                        if(res.code != 0){
                            return layer.msg(res.msg);
                        }
                        layer.close(index);
                        othis.parent().html('<em>已拒绝</em>');

                        othis.parent().html('已拒绝');
                        parent.sendMsg({action:'refuse',token:localStorage.getItem('token'),fuid:fuid,group:group})
                    });
                });
            }
        };

        $('body').on('click', '.layui-btn', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</body>
</html>
<?php /**PATH /mnt/e/app/demo/easy/Static/View/msgbox.blade.php ENDPATH**/ ?>